Tengo esta grilla CSS
.grid { display: grid; grid-column-gap: 50px; grid-template-columns: repeat(3, 1fr); }que está sentado en un div con ancho: 500px
pero noté que el primer elemento en la cuadrícula "abraza" el borde izquierdo del div, pero el elemento más a la derecha no toca el borde del div.
En flexbox podría lograr esto con (lo suficientemente cerca):
.flex { display: flex; justify-content: space-between; }¿Cómo hago esto de manera receptiva con la cuadrícula?
Sé que puedo cambiar la brecha de la columna de la cuadrícula, pero eso parece escamoso
Use auto en lugar de 1fr y el mismo justify-content funcionará como con flexbox:
.grid { display: grid; grid-column-gap: 50px; grid-template-columns: repeat(3, auto); justify-content:space-between; } <div class="grid"> <div>aaa</div> <div>bbb</div> <div>ccc</div> </div>Considere usar la palabra clave de ajuste auto-fit para ajustar las columnas en el espacio de fila disponible al expandirlas.
.grid-container { display: grid; grid-column-gap: 10px; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); } .grid-item { background-color: blue; padding: 30px; } <div class="grid-container"> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> </div>